<template>
  <div style="width: 100%;height: 100%;">

    <div class="card-container">
      <!-- 左边的卡片 -->
      <el-card style="width: 48%;padding-right: 2%;box-sizing: border-box;">
        <h3>最新公告</h3>
        <el-timeline style="max-width: 100%;margin-left: -5%">
          <el-timeline-item v-for="(item,index) in data.tableNewNoticeData" :key="item.noticeId"
                            :timestamp="item.noticePublishTime" placement="top">
            <el-card>
              <h4>{{ item.noticeTitle }}</h4>
              <p><span style="color: #1890ff">公告内容：</span>{{ item.noticeContent }}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-card>

      <!-- 右边的卡片 -->
      <el-card style="width: 48%;">
        <h3>历史公告(一周前)</h3>
        <!-- 右边卡片的内容 -->
        <div class="demo-collapse" v-for="(item,index) in data.tableData" :key="item.noticeId">
          <el-collapse v-model="activeName" accordion>
            <el-collapse-item :title="item.noticeTitle" :name="index">
              <div>
                <div><span style="color: #1890ff">发布日期：</span>{{item.noticePublishTime}}</div>
                <p><span style="color: #1890ff">公告内容：</span>{{ item.noticeContent }}</p>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>

import {ElLoading} from "element-plus";
import request from "@/utils/request.js";
import {reactive, ref} from "vue";
const activeName = ref('1')

const data = reactive({
  //历史公告
  tableData: [],
  //最新公告
  tableNewNoticeData:[]
})

const Load = () => {
  let loadingInstance = ElLoading.service({fullscreen: true}); // 启动全屏加载动画
  console.log("搜索框关键词：", data.SearchKeyWord);

  request.get(`/java/notice/getHistoricalNotice`)
      .then((response) => {
        console.log("历史公告数据：", response);
        data.tableData = response.data;
      })
      .catch((error) => {
        console.error('请求发生错误:', error);
      })
      .finally(() => {
      });

  request.get(`/java/notice/getNewNotice`)
      .then((response) => {
        console.log("最新公告数据：", response);
        data.tableNewNoticeData = response.data;
      })
      .catch((error) => {
        console.error('请求发生错误:', error);
      })
      .finally(() => {
        loadingInstance.close();
      });
};

Load()



</script>


<style>
.card-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
</style>